// 商品列表
<template>
  <div class="role">
    <div class="role-content">
      <div class="role-top">
           <el-input placeholder="请输入商品名称" style="width:200px;" v-model="allPages.title"></el-input>
        <el-input placeholder="请输入商条形码" style="width:200px;" v-model="allPages.barcode"></el-input>
        <el-select v-model="allPages.status" clearable placeholder="请选择商品状态">
          <el-option
            style="height:46px"
            v-for="item in state"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
         <el-cascader v-model="ruleForm.category" :props="{ checkStrictly: true,value:'value',label:'label'}" :options="options" ref="cascader" placeholder="请选择类目" style="margin-right: 10px;"></el-cascader>
        <button type="button" class="el-button el-button--primary" @click="management()">
          <i class="el-icon-search"></i>
          <span>查找</span>
        </button>
        <button type="button" class="el-button el-button--primary" @click="additions()"  v-Promise="'operation:goods:create'">
          <i class="el-icon-edit"></i>
          <span>添加</span>
        </button>
        <button type="warning" @click="delGroup()" :disabled="this.sels.length === 0"  class="el-button filter-item el-button--danger is-disabled">
          <i class="el-icon-delete"></i><span>批量删除</span>
        </button>
      </div>
      <!--内容 -->
      <el-card class="box-card">
          <el-table
          border
          :data="listData"
          tooltip-effect="dark"
          style="width: 100%"
          ref="table"
           @row-click="handleCurrentChange"
           @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column type="expand" label="sku信息" width="42px">
            <template slot-scope="scope">
              <el-table :data="scope.row.skuList" style="width:100%" border>
                <el-table-column prop="barCode" label="商品条码"></el-table-column>
                <el-table-column prop="title" label="商品规格"></el-table-column>
                <el-table-column prop="stock" label="商品库存"></el-table-column>
                <el-table-column prop="freezeStock" label="商品冻结库存"></el-table-column>
                <el-table-column prop="originalPrice" label="原价"></el-table-column>
                <el-table-column prop="price" label="现价"></el-table-column>
                <el-table-column prop="vipPrice" label="VIP价格"></el-table-column>
              </el-table>
            </template>
          </el-table-column>
          <el-table-column label="商铺ID" prop="id"></el-table-column>
          <el-table-column label="名称" prop="title"></el-table-column>
          <el-table-column label="图片">
            <template slot-scope="scope">
              <img :src="scope.row.img" style="height:50px" />
            </template>
          </el-table-column>
          <el-table-column label="商品详细介绍" prop="detail">
            <template slot-scope="scope">
              <el-button size="mini" class="blue" @click="stateList(scope.row)">查看</el-button>
            </template>
          </el-table-column>
          <el-table-column label="类目ID" prop="categoryId"></el-table-column>
          <el-table-column label="邮费模板ID" prop="freightTemplateId"></el-table-column>
          <el-table-column label="销量" prop="sales"></el-table-column>
          <el-table-column label="单位" prop="unit"></el-table-column>
          <el-table-column label="是否在售" prop="status">
            <template slot-scope="scope">
              <el-tag :type="scope.row.status === 0 ? 'primary' : 'success'" disable-transitions>
                {{scope.row.status|statcusTitls()}}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="描述" prop="description"></el-table-column>
          <el-table-column label="操作" width="250px">
            <template slot-scope="scope">
              <el-button size="mini" @click="compile(scope.$index,scope.row)"  class="blue">编辑</el-button> 
              <el-button  size="mini"  @click="putaway(scope.row)" style="background:#67C23A;color:#ffffff;" v-show="scope.row.status==0">
                {{scope.row.status|statusreverse()}}</el-button>
              <el-button  size="mini"  @click="putaway(scope.row)" style="background:#E6A23C;color:#ffffff;" v-show="scope.row.status==1">
                {{scope.row.status|statusreverse()}}</el-button>
              <el-button size="mini" type="danger" @click="deletes(scope.$index,scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
       <!-- 查看 -->
      <el-dialog :title="titleName" :visible.sync="FormVisible">
        <div v-html="picture">{{picture}}</div>
      </el-dialog>
      <!-- 分页 -->
      <div class="block">
        <!-- current-change当前页size-change每页条数current-page当前页数，支持 .sync 修饰符page-sizes每页显示条目个数，支持 .sync 修饰符-->
        <Paging @handle="handles" :allPages="paging"></Paging>
      </div>
    </div>
  </div>
</template>
<script>
import Upsert from "./Upsert";
import goods from "../../api/goods/goodslist";
import Paging from "../../components/Paging"; //分页
export default {
  components: {
    Paging,
  },
  data() {
    return {
         state: [
        {
          value: 0,
          label: "下架"
        },
        {
          value: 1,
          label: "正常"
        }
      ],
      sels: [], //选中的值显示
      picture: [], //图片
      tableData: [], //列表数组
      spuTitl: [],
      change: "",
      dialogFormVisible: false,
      FormVisible: false,
      titleNames: "", //二次是否添加还是编辑
      allPages: {
        currentPage: 1, //当前的默认的页数
        eachpage: 20, //默认的页码
        total: 0, //初始值共数据条
        totalPageNo: 1,
        // 查询
        title: "",
        barcode: "",
        status: "",
        categoryId: "",
        category:''
      },
      ruleForm: {
        spuId: "",
        categoryId: "",
        id: ""
      },
      fors: [],
      titleName: "",
      options: [], //spu树
      // 分页
      paging: {
        id: "",
        title: "",
        level: "",
        parentId: "",
        currentPage: 1, //当前的默认的页数
        eachpage: 20, //默认的页码
        total: 0, //初始值共数据条
        totalPageNo: 1,
      },
      listData: [], //初始化数据
      dialogFormVisible: false,
      FormVisible: false, //弹窗口
      select: [], //选中的权限'
      data: [],
      // 弹框
      dialogStatus: "",
      titleMap: {
        addEquipment: "新增",
        editEquipment: "编辑",
      },
      //  输入框宽度
      formLabelWidth: "120px",
      //  输入框
      currentPage: "",
       multipleSelection: []
    };
  },
  filters: {
    statusreverse: function (value) {
      switch (value) {
        case 0:
          value = "上架";
          break;
        case 1:
          value = "下架";
          break;
      }
      return value;
    },
    statcusTitls: function (value) {
      switch (value) {
        case 0:
          value = "未售";
          break;
        case 1:
          value = "在售";
          break;
      }
      return value;
    },
  },
  created() {
    this.goodslist();
    this.spuTree()
  },
  methods: {
     toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      // 全选
      handleSelectionChange(val) {
        this.multipleSelection = val;
          console.log(this.multipleSelection,this.listData)
      },
      handleCurrentChange(){

      },
    handleChange(val) {
      this.ruleForm.parentId = this.$refs.cascader.getCheckedNodes()[0].data.value; //获取选中的节点数组
      console.log(this.ruleForm.parentId)
    },
    // 分页负值
    handles(val) {
      this.allPages = val;
    },
    //数据详情
    goodslist() {
      let _this = this;
      goods.list().then((res) => {
          console.log(res)
        _this.listData = res.data.data.items;
        _this.ruleForm = { ...res.data.data.items };
        _this.paging.currentPage = res.data.data.pageNo;
        _this.paging.eachpage = res.data.data.pageSize;
        _this.paging.total = res.data.data.total;
        _this.paging.totalPageNo = res.data.data.totalPageNo;
      });
    },
    // 添加
       additions() {
      (this.FormVisible = true), this.$router.push("/goods/upsert");
    },
    // spu树
    spuTree(){
      goods.supTree().then(res=>{
        this.options=res.data.data
      })
    },
    // 产品状态
    putaway(row){
      console.log(row)
      this.$confirm("此操作将商品--"+row.title+"--是否继续?", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
        .then(() => {
          goods.market(row).then(res=>{
            this.$message.success("恭喜你，操作成功");
             if (row.status === 1) {
                  row.status = 0;
                } else {
                  row.status = 1;
                }
                for (const i in _this.listData) {
                  if (_this.listData[i].id === row.id) {
                    _this.listData[i].status = row.status;
                  }
                }
            this.goodslist();
          });
        });
    },
        // 查看详情
    stateList(row) {
      let that = this;
      (that.FormVisible = true), (that.titleName = "详情");
      let data = {
        spuId: row.id
      };
      goods.particulars(data).then(function(res) {
        that.picture = res.data.data.detail;
      });
    },
        // 删 除
    deletes(index, row) {
      let _this=this
      _this
        .$confirm("此操作将永久删除, 是否继续?","提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
        .then(() => {
          let data = {
            spuId: row.id
          };
          goods.deletes(data).then(function(res) {
              _this.$message.success("删除成功");
            _this.goodslist();
          });
        });
    },
    // // 添加
    // addEquipment() {
    //   this.dialogFormVisible = true;
    //   this.dialogStatus = "addEquipment";
    //   this.ruleForm = {};
    // },
    // // 编辑
    // handelEdit(row) {
    //   console.log(row);
    //   this.dialogFormVisible = true;
    //   this.dialogStatus = "editEquipment";
    //   this.ruleForm = { ...row };
    //   this.ruleForm.title = row.label;
    //   this.ruleForm.parentId = row.parent;
    //   this.ruleForm.id = row.value;
    // },
  },
  watch: {
    // 去除错误提示
    dialogFormVisible(val) {
      if (val == false) {
        this.$refs.ruleForm.clearValidate();
      }
    },
  },
};
</script>
<style scoped>
.role {
  width: 100%;
  line-height: 0px;
  overflow: hidden;
}
/* 上传 */
.relevance >>> .el-form-item__label {
  padding-right: 30px;
}
.avatar-uploader/deep/.el-upload {
  border: 1px dashed #cccccc;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader/deep/.el-icon-plus {
  width: 100px;
  height: 100px;
  line-height: 150px;
}
>>> .el-upload {
  width: 150px;
  height: 150px;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
>>> .avatar-uploader {
  width: 150px;
  margin-bottom: 10px;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
/* 添加编辑 */
.el-input {
  width: 300px;
}
.el-form/deep/.el-input__inner {
  width: 300px;
}
.el-form/deep/.el-form-item__content {
  width: 300px;
  margin-left: 0 !important;
}
>>> .el-dialog/deep/.el-dialog__header {
  width: 50px;
}
.el-form-item/deep/.el-form-item__error {
  text-indent: 8rem;
}
/* 分页 */
.block {
  width: 40%;
  padding-top: 20px;
}
/* 字体居中 */
.blue {
  background: #409eff;
  color: #ffffff;
}
.el-table--enable-row-transition/deep/.el-table__body td {
  text-align: center;
}
.el-table/deep/th.is-sortable {
  cursor: pointer;
  text-align: center;
}
.el-table td,
.el-table/deep/th.is-leaf {
  text-align: center;
}
/* 布局 */
.el-card/deep/.box-card {
  height: 50%;
  overflow: hidden;
}
.role-content {
  width: 96%;
  margin: auto;
  overflow: hidden;
}
.el-input {
  width: 200px;
  margin-right: 10px;
}
.role-top {
  width: 300px;
  line-height: 60px;
}
.role-top/deep/.el-select {
  margin-right: 10px;
}
.box-card {
  overflow: hidden;

}
</style>
